<template>
  <header-option class="role_header">
    <template v-slot:btn>
      <div>
        <cs-btn type="primary" btnText="添加" @click.native="addRoleDialogVisible" />
        <cs-btn btnText="导出" v-show="false" />
        <cs-btn btnText="删除" />
      </div>
    </template>
    <template v-slot:input>
      <cs-label labelText="角色名称" width="225">
        <el-input class="cs-input" v-model="headerData.roleName" clearable></el-input>
      </cs-label>
      <cs-label labelText="权限字符" width="225">
        <el-input class="cs-input" v-model="headerData.permissionCharacter" clearable></el-input>
      </cs-label>
      <cs-label labelText="角色状态" width="241">
        <el-select placeholder="所有" class="cs_select" v-model="headerData.roleStatus" clearable>
          <el-option value="好" label="好"></el-option>
          <el-option value="差" label="差"></el-option>
        </el-select>
      </cs-label>
      <cs-label labelText="创建时间" class="creatTimeLabel">
        <el-date-picker
          v-model="headerData.value1"
          type="datetime"
          placeholder="请选择开始时间"
          align="right"
          :picker-options="headerData.pickerOptions"
          prefix-icon="none"
        >
        </el-date-picker>
        <div class="selectTimeIcon_middle">-</div>
        <el-date-picker
          v-model="headerData.value2"
          type="datetime"
          placeholder="请选择结束时间"
          align="right"
          :picker-options="headerData.pickerOptions"
          prefix-icon="none"
        >
        </el-date-picker>
      </cs-label>
      <cs-btn type="search" btnText="查询" class="searcg_btn" />
    </template>
  </header-option>
</template>

<script>
import headerOption from '@/components/headerOption/headerOption.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csLabel from '@/components/cs-label/cs-label.vue'

export default {
  components: {
    headerOption,
    csBtn,
    csLabel
  },
  data() {
    return {
      headerData: {
        roleName: '',
        // 权限字符
        permissionCharacter: '',
        roleStatus: '',
        value1: '',
        value2: '',
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              }
            }
          ]
        }
      }
    }
  },
  methods: {
    addRoleDialogVisible() {
      this.$bus.$emit('addRoleDialogVisible')
    }
  }
}
</script>

<style scoped>
/* 头部样式start */
.cs-btn {
  margin-right: 10px;
}

.cs-input >>> .el-input__inner {
  width: 135px !important;
  height: 32px !important;
  border-radius: 0 !important;
}

.el-input >>> .el-input__icon {
  line-height: 32px;
}

.cs_select >>> .el-input__inner {
  width: 152px;
  height: 32px;
  line-height: 32px;
  border-radius: 0;
}

/* 更改el-select下拉框图标的行高 */
.selectTimeInput >>> .el-input__icon {
  line-height: 32px !important;
}

.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.creatTimeLabel {
  width: 455px;
}

.el-date-editor >>> .el-input__inner {
  width: 172px;
  height: 32px;
  line-height: 32px !important;
  border-radius: 0;
  padding-left: 16px;
  padding-right: 0;
  color: #939393;
  background-color: #ebeef2;
}

.el-date-editor >>> .el-input__icon {
  line-height: 32px;
}

.selectTimeIcon_middle {
  font-size: 23px;
  color: #e1e1e1;
  padding: 0 5px;
}

.searcg_btn {
  margin-right: 0;
}

/* .role_header {
  padding: 30px 10px;
} */

/* 头部样式end */
</style>
